<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('customer.customer')"/>
        <div class="content">
            <el-button @click="openDialog" icon="el-icon-plus" size="small" type="primary">{{$t('customer.add')}}</el-button>
            <div class="search" style="margin-top: 20px;">
                <el-input v-model="key" :placeholder="$t('customer.search')" class="input" size="small" prefix-icon="el-icon-search"></el-input>
            </div>
            <div class="table-wrapper">
                <el-table
                        :data="customerList.filter(item => !key || item.customerName.toLowerCase().includes(key.toLowerCase())).slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        row-key="id"
                        border
                        stripe
                >
                    <el-table-column :label="$t('customer.customerName')" prop="customerName"/>
                    <el-table-column :label="$t('customer.area')" prop="area"/>
                    <el-table-column width="600">
                        <template slot-scope="customer">

                            <el-button icon="el-icon-edit" size="small" type="primary"
                                       @click="openEdit(customer.row)">{{$t('edit')}}
                            </el-button>
                            <el-button icon="el-icon-location" size="small" type="primary"
                                       @click="addressPage(customer.row)">{{$t('customer.address')}}
                            </el-button>
                            <el-button icon="el-icon-phone" size="small" type="primary"
                                       @click="contactPage(customer.row)">{{$t('customer.contact')}}
                            </el-button>
                            <el-button icon="el-icon-picture" size="small" type="primary"
                                       @click="financePage(customer.row)">{{$t('customer.fiance')}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <Address :visible="addressShow" :customerId="customerId" @close="addressShow = false"></Address>
        <Contact :visible="contactShow" :customerId="customerId" @close="contactShow = false"></Contact>
        <finance :visible="fianceShow" :customer="customerId" @close="fianceShow = false"></finance>
        <el-dialog :visible.sync="dialogVisible" :title="$t('customer.customer')">
            <el-form ref="customers" :rules="rule1" label-width="150px" :model="customer1">
                <el-form-item :label="$t('customer.customerName')" required prop="customerName">
                    <el-input size="small" v-model="customer1.customerName"/>
                </el-form-item>
                <el-form-item :label="$t('customer.level')">
                    <el-input size="small" v-model="customer1.customerLevel"/>
                </el-form-item>
                <el-form-item :label="$t('customer.area')">
                    <el-input size="small" v-model="customer1.area"/>
                </el-form-item>
                <el-form-item :label="$t('customer.type')">
                    <el-select v-model="customer1.belongModule"  clearable>
                        <el-option
                                label="Sp MOROWALI"
                                value="1">
                        </el-option>
                        <el-option
                                label="Sp WEDA"
                                value="2">
                        </el-option>
                        <el-option
                                label="IEC 服务站"
                                value="3">
                        </el-option>
                        <el-option
                                label="Sp MKS"
                                value="4">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('customer.factor')" v-if="customer1.belongModule">
                    <el-input v-model="customer1.priceFactor" placeholder="Factor"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
                        <el-button type="primary" @click="submitForm">{{$t('confirm')}}</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";
    import { addCustomer, modCustomer} from "../../api/customer";
    import {getCustomerList} from "../../api";
    import Address from './address'
    import Contact from './contact'
    import finance from './fiance'

    export default {
        name: "customer",
        mixins: [mixins],
        data() {
            return {
                list: [],
                addressShow: false,
                contactShow: false,
                fianceShow:false,
                key: '',
                status: 0,
                customerList: [],
                dialogVisible: false,
                dialogVisible1: false,
                dialogVisible2: false,
                rule: {
                    customerName: [{required: true}]
                },
                employeeList: [],
                customerId: '',
                customer: {customerName: '', id: ''},
                rule1: {
                    customerName: [
                        {required: true, trigger: 'blur', max: 50}
                    ],
                    customerNo: [
                        {required: true, trigger: 'blur',}
                    ],
                    phoneNumber: [
                        {required: true, trigger: 'blur'},
                    ],
                },
                customer1: {
                    belongModule:'3',
                    customerName: '',
                    customerLevel: '',
                    area: '',
                    priceFactor:0
                }
            }
        },
        created() {
            this.getCustomerList()
        },

        methods: {
            openEdit(c) {
                 this.customer1 = {
                     belongModule:c.belongModule,
                    customerId:c.customerId,
                    npwp:c.npwp || '',
                    sppkp:c.sppkp || '',
                    customerName: c.customerName,
                    customerLevel: c.customerLevel,
                    area: c.area,
                     priceFactor:c.priceFactor
                };
                 this.dialogVisible = true
            },
            submitForm(){
                this.$refs.customers.validate(async valid=> {
                    if (valid) {
                        if(this.customer1.customerId){
                            const {status} = await modCustomer(this.customer1);
                            if (status === ERROR_OK) {
                                this.$notify.success('Modify successfully');
                            } else {
                                this.$notify.error('Error,please retry')
                            }
                        } else {
                            const {status} = await addCustomer(this.customer1);
                            if (status === ERROR_OK) {
                                this.$notify.success('Add successfully');
                                this.getCustomerList();
                            } else {
                                this.$notify.error('Error,please retry')
                            }
                        }
                        this.clear();
                        this.dialogVisible = false
                    } else {
                        this.$notify.error('Form is not complete')
                    }
                })
            },
            clear(){
                this.customer1= {
                    belongModule:'3',
                    customerName: '',
                    customerLevel: '',
                    area: '',
                    priceFactor:0
                }
            },
            async getCustomerList() {
                const {status, data} = await getCustomerList();
                if (status === 0) {
                    this.customerList = data;
                    this.total = data.length
                }
            },
            financePage(customer){
                this.customerId = customer;
                this.fianceShow = true;
            },
            async contactPage(customer) {
                this.customerId = customer.customerId;
                this.contactShow = true
            },
            openDialog() {
                this.clear()
                this.dialogVisible = true;
            },
            addressPage(customer) {
                this.customerId = customer.customerId;
                this.addressShow = true
            }
        },
        components: {
            Crumb, Address, Contact,finance
        }
    }
</script>

<style scoped lang="scss">
    @import '../../css/mixins';

    .jianzhan-content {
        position: relative;
    }

    .content {
        @include content
    }
</style>